<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" language="javascript">
var request;</script>
<script type="text/javascript" src="js/ajax.js"></script>
<script language="javascript" type="text/javascript">
var pid=new Array();
<%! int i=0;%><%i=0;%><c:forEach items="${model.photo }" var="p">pid[<%=i%>]=${p.id};
<%i=i+1;%></c:forEach>
function proDownImage(ImgD,proMaxHeight,proMaxWidth){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate <= 1){
 ImgD.width = image.width*rate;
 ImgD.height =image.height*rate;
}
else {
ImgD.width = image.width;
ImgD.height =image.height;}}}

var count=${model.photocount};
function closeview()
{
	document.getElementById('photoshow').style.display='none';
}
function show(id)
{
	document.getElementById('photoshow').style.display='block';
	document.getElementById('mainphoto').src="photo_"+pid[id]+".jpg";
	if (id<count-1)
	{
		var nexthtm="";
		nexthtm+="<a href='#' onclick='javascript:show("+(id+1)+");'>";
		nexthtm+="<img src='images/nextphoto.png' style='border:none; vertical-align:bottom; margin-left:auto; margin-right:auto;' />";
		nexthtm+="</a>";
		document.getElementById('next').innerHTML=nexthtm;
	}
	else
	{
		document.getElementById('next').innerHTML="";
	}
	if (id>0)
	{
		var prehtm="";
		prehtm+="<a href='#' onclick='javascript:show("+(id-1)+");'>";
		prehtm+="<img src='images/prephoto.png' style='border:none; vertical-align:bottom; margin-left:auto; margin-right:auto;' />";
		prehtm+="</a>";
		document.getElementById('pre').innerHTML=prehtm;
	}
	else
	{
		document.getElementById('pre').innerHTML="";
	}
}
function showcase(userid,page)
{
	createRequest();
	request.open("GET","listuseralbumpage.htm?userid="+userid+"&page="+page+"",true);
	request.onreadystatechange = updatePage;
	request.send(null);
}
function updatePage(){
	if(request.readyState == 4 ){
	   document.getElementById('showcases').innerHTML = request.responseText;
	}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body style="width:700px; height:506px; text-align:center; margin-top:0px;" onload="javascript:showcase(${model.detail.userID},1)">
<table style="width:700px; height:506px; border:none">
<tr style="height:125px;"><td style="text-align:center; vertical-align:middle; height:125px;"><img src="head_${model.detail.userID }.jpg" style="border:none; margin-left:auto; margin-right:auto;" onload="proDownImage(this,125,125);" /></td>
<td>
<div id="photoshow" style="z-index:10;filter:progid:DXImageTransform.Microsoft.alpha(opacity=90);opacity:0.9; background-color:#000000; width:509px; position:absolute; display:none;">
<table cellpadding="0" cellspacing="0"><tr><td></td>
<td rowspan="2" style="width:440px; height:330px; "><img id="mainphoto" src="photo_1.jpg" width="440px" height="330px" onload="proDownImage(this,330,440);" /></td>
<td style="width:30px; height:30px;"><a href="#" onclick="javascipt:closeview();">
<img src="images/close.png" style="border:none; vertical-align:bottom; margin-left:auto; margin-right:auto"  /></a></td></tr>
<tr>
<td id="pre" style="vertical-align:middle; width:30px; height:330px; text-align:right;"></td>
<td id="next" style="width:30px; height:300px; vertical-align:middle"></td></tr></table></div>
<div id="showcases" style="background-image:url(images/back507126.png); background-repeat:no-repeat; height:126px; width:507px;"></div>
</td></tr>
<tr style="height:135px;"><td style="text-align:center; vertical-align:top;">
<div style="background-image:url(images/back126135.png); background-repeat:no-repeat; height:135px; width:126px; margin-left:auto; margin-right:auto; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:9px;">
<table style="margin-left:auto; margin-right:auto;text-align:left; line-height:9px; height:99px; margin-bottom:18px; margin-top:18px" border="0" cellpadding="0" cellspacing="0">
<tr><td>Character:${model.detail.character }</td></tr>
<tr><td>Costume:${model.detail.costume }</td></tr>
<tr><td>Photographer:${model.detail.photographer }</td></tr>
<tr style="height:9px;"><td></td></tr>
<tr><td>Nickname:${model.detail.nickname }</td></tr>
<tr><td>Type:${model.detail.type }</td></tr>
<tr><td>Update Date:${model.detail.joined }</td></tr>
<tr style="height:9px;"><td></td></tr>
<tr><td>CosplayID:${model.detail.userID }</td></tr>
<tr><td>PhotoViews:${model.detail.viewed }</td></tr>
<tr><td>PhotoVotes:${model.detail.voted }</td></tr>
</table>
</div><br />
<img src="images/votebutton.png" style="vertical-align:bottom;" /></td>
<td style="background-image:url(images/back509193.png); background-repeat:no-repeat; width:509px; height:193px;">Competition Photoshots Description:</td></tr>
<tr style="height:246px; vertical-align:top;"><td></td><td style="text-align:left; vertical-align:top;"><img src="images/mycompetitionphotoshots.png" style="vertical-align:bottom;"/><br />
<br />
<div id="photolist" style="background-color:#000000; height:145px; vertical-align:middle">
<table><tr>
<%i=0;%><c:forEach items="${model.photo }" var="p">
<td style="height:145px; vertical-align:middle;"><a href="#" onclick="javascript:show(<%=i %>);"><img style="vertical-align:bottom; border:none;" width="80px" height="125px" src="preview_${p.id }.jpg" onload="proDownImage(this,125,80);" /></a></td>
<%i=i+1;%></c:forEach></tr></table>
</div></td></tr></table>
</body>
</html>